<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>集散中心-物流能力展示</title>
  <link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_1031373_7dlwku3mymg.css">
  <link rel="stylesheet" href="src/css/visualStyle.css">
</head>

<body>
  <div id="app">
    <div class="visual-wrapper">
      <h2 class="visual-big-tit">{{ city }}医药集散中心物流能力展示</h2>
      <div class="visual-container">
        <div class="warehouseOverview-top bg-part">
          <div class="visual-small-tit blue">配送能力展示</div>
          <div class="warehouseOverview-top-c displayflex">
            <dl v-for="(item, index) in basicAbility">
              <dt class="iconfont"></dt>
              <dd>
                <p>{{ item.name }}</p>
                <span><b>{{ item.number }}</b> <b v-if="item.number2 !== ''">& {{ item.number2 }}</b></span>
              </dd>
            </dl>
          </div>
          <div class="bg-part2"></div>
        </div>
        <div class="warehouseOverview-middle displayflex">
          <div class="warehouseOverview-middle_l warehouseOverview-l bg-part">
            <div class="visual-small-tit blue">仓储能力展示</div>
            <div class="warehouse-capacity">
              <ul>
                <li>平均订单处理效率：<span class="blue">{{ capacity.OutOrderProcess }}分钟/单</span></li>
                <li>集散订单周转效率：<span class="blue">{{ capacity.InOrderProcess }}分钟/单</span></li>
                <li>日出库订单数：<span class="blue">{{ capacity.OutOrderCount }}单</span></li>
                <li>日入库订单数：<span class="blue">{{ capacity.InOrderCount }}单</span></li>
                <li>日出库件数：<span class="blue">{{ capacity.OutWholeTotalPKGS }}件</span></li>
                <li>日入库件数：<span class="blue">{{ capacity.InTotalPKGS }}件</span></li>
              </ul>
            </div>
            <div class="bg-part2"></div>
          </div>
          <div class="warehouseOverview-middle_r warehouseOverview-r bg-part">
            <div class="visual-small-tit blue">季度平均库容使用情况</div>
            <div id="stockLine" class="chart-box middle-chart-box"></div>
            <div class="bg-part2"></div>
          </div>
        </div>
        <div class="warehouseOverview-bottom displayflex">
          <div class="warehouseOverview-bottom-l bg-part">
            <div class="visual-small-tit blue">仓库总体使用情况</div>
            <div id="overallUsePie" class="chart-box bottom-chart-box"></div>
            <p class="overallUsePie-total">总库容：{{((this.overallUsePieData[0].value+this.overallUsePieData[1].value)/10000)}}万件</p>
            <div class="bg-part2"></div>
          </div>
          <div class="warehouseOverview-bottom-r bg-part">
            <div class="visual-small-tit blue">仓库存储情况一览</div>
            <div id="warehouseBar" class="chart-box bottom-chart-box"></div>
            <div class="bg-part2"></div>
          </div>
        </div>
      </div>
      <div class="visual-footer">Copyright © 2006-2015 深圳传世般若科技有限公司</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="../src/js/echarts.js"></script>
  <script>
    var appLayout = new Vue({
      el: '#app',
      data: {
        city: '洛阳',
        basicAbility: [
          {
            name: "上游委托企业(家)",
            number: 0,
            number2: ''
          },
          {
            name: "下游客户(万家)",
            number: 0,
            number2: ''
          },
          {
            name: "医药货量(件/年)",
            number: 0,
            number2: ''
          },
          {
            name: "运营车辆&冷藏车辆",
            number: 0,
            number2: 0
          },
          {
            name: "存储中心(家)",
            number: 0,
            number2: ''
          },
          {
            name: "配送终端(个)",
            number: 0,
            number2: ''
          },
          {
            name: "辐射省份&城市",
            number: 0,
            number2: 0
          }
        ],
        capacity: {
          OutOrderProcess: 0,
          InOrderProcess: 0,
          OutOrderCount: 0,
          InOrderCount: 0,
          OutWholeTotalPKGS: 0,
          InTotalPKGS: 0
        },
        barStyle: {
          lineColor: {
            lineStyle: {
              color: "rgba(65, 207, 254, .15)"
            }
          },
        },
        pieStyle: {
          labelLine: {
            normal: {
              show: true,
              length: 25,
              length2: 85,
              lineStyle: {
                color: '#41cffe',
                type: 'dashed'
              }
            }
          },
          label: {
            normal: {
              show: true,
              formatter: '{a|{c}件}',
              rich: {
                a: {
                  color: '#fff',
                  fontSize: 16,
                  lineHeight: 35
                }
              },
              borderWidth: 0,
              borderRadius: 4,
              padding: [0, -80],
              height: 70,
            }
          },
        },
        warehouseBar: {
          name: ["零库", "整库", "立库", "冷藏库", "冷冻库", "缓冲区", "中药库", "贵细库", "原料药库"],
          value: [12800, 4900, 240350, 5000, 474000, 105000, 67640, 0, 0], // 已用
          valuePercent: [80, 35, 95, 50, 79, 15, 76, 0, 0], // 百分比
          valueTotal: [16000, 14000, 253000, 10000, 6000, 700000, 89000, 30000, 16900] // 总量
        },
        overallUsePieData: [
          {value: 127998, name: "可存放件数"},
          {value: 132002, name: "已存放件数"}
        ],
        wareData: {
          name: ['第一季度', '第二季度', '第三季度', '第四季度'],
          value: [138900, 60000, 90000, 150000]
        }
      },
      mounted() {
        this.getModel();

        this.getAllEcharts();
        // this.getStockLine();
        // this.getOverallUsePie();
        // this.getWarehouseBar();
      },
      methods: {
        getModel() {
          let self = this;
          axios.get('http://117.78.35.198:9001/Logistics/GetModel?tenantGuid=string')
            .then(function (res) {
              //01 开始绑定配送能力展示
              self.basicAbility[0].number = res.data.Distribution.UpCompany[0];
              self.basicAbility[1].number = res.data.Distribution.DownClient[0];
              //医药货量
              self.basicAbility[2].number = res.data.Distribution.Medicine[0];
              self.basicAbility[3].number = res.data.Distribution.Car[0]; //车
              self.basicAbility[3].number = res.data.Distribution.Car[1]; //冷藏车辆
              //存储中心
              self.basicAbility[4].number = res.data.Distribution.StoreCenter[0];
              //配送终端
              self.basicAbility[5].number = res.data.Distribution.Terminal[0];
              //辐射省份&城市
              self.basicAbility[6].number = res.data.Distribution.OverCitys[0];
              self.basicAbility[6].number2 = res.data.Distribution.OverCitys[1];

              //02 开始绑定 仓储能力展示
              self.capacity.OutOrderProcess = res.data.Store.OutOrderProcess;
              self.capacity.InOrderProcess = res.data.Store.InOrderProcess;
              self.capacity.OutOrderCount = res.data.Store.OutOrderCount;
              self.capacity.InOrderCount = res.data.Store.InOrderCount;
              self.capacity.OutWholeTotalPKGS = res.data.Store.OutWholeTotalPKGS;
              self.capacity.InTotalPKGS = res.data.Store.InTotalPKGS;

              //03 开始绑定库容
              self.wareData.value = [].concat(res.data.StoreCapacity.Capacity);
              self.getStockLine();

              //04 开始绑定仓库总体使用情况
              let StorePKG = self.overallUsePieData[0].value = res.data.StorePKG.Data;
              self.overallUsePieData = [];
              for (let item of StorePKG) {
                let d = {};
                for (let k in item) {
                  d["name"] = d[k];
                  d["value"] = item[k];
                }
                self.overallUsePieData.push(d);
              }
              self.getOverallUsePie();

              //05 开始绑定 仓库存储情况一览
              self.warehouseBar.name = [].concat(res.data.StoreCategory.Name);
              self.warehouseBar.value = [].concat(res.data.StoreCategory.Value); // 已用
              self.warehouseBar.valuePercent = [].concat(res.data.StoreCategory.ValuePercent); // 百分比
              self.warehouseBar.valueTotal = [].concat(res.data.StoreCategory.ValueTotal); // 总量
              self.getWarehouseBar();
            })
            .catch(function (error) {
              // handle error
              console.error(error);
            });

        },

        // 季度平均库容使用情况 stockLine
        getStockLine() {
          let stockLineChart = echarts.init(document.getElementById("stockLine"));
          let self = this;
          let valueTotal = self.wareData.value.reduce((x, y) => x + y);
          let stockLineOption = {
            grid: {
              top: '23%',
              left: '8%',
              right: '8%',
              bottom: '15%',
              containLabel: true,
            },
            legend: {
              data: ['总库容：' + (valueTotal / 10000).toFixed(2) + '万件'],
              top: 0,
              right: '20px',
              icon: 'circle',
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                color: '#f9f9f9',
                borderColor: '#fff'
              },
            },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              axisTick: false,
              axisLine: this.barStyle.lineColor,
              axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                  color: '#d1e6eb',
                  margin: 15,
                },
              },
              data: self.wareData.name,
            }],
            yAxis: [{
              type: 'value',
              splitLine: false,
              axisTick: false,
              axisLine: false,
              axisLabel: false
            }],
            series: [{
              name: '总库容：' + (valueTotal / 10000).toFixed(2) + '万件',
              type: 'line',
              smooth: true, //是否平滑曲线显示
              // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
              showAllSymbol: true,
              symbol: 'emptyCircle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: "#41cffe", // 线条颜色
                },
                borderColor: '#41cffe'
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                },
                formatter: x => {
                  return `${(x.value / 10000).toFixed(2)}万件/${(x.value/valueTotal).toFixed(2)}%`;
                }
              },
              itemStyle: {
                normal: {
                  color: "#41cffe",
                }
              },
              tooltip: {
                show: false
              },
              areaStyle: { //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(65,207,254,1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0, 0, 0, 0)'
                    }
                  ], false)
                }
              },
              data: self.wareData.value
            }]
          };
          stockLineChart.setOption(stockLineOption, true);
          this.stockLineChart = stockLineChart;
        },

        // 仓库总体使用情况 overallUsePie
        getOverallUsePie() {
          let overallUsePieChart = echarts.init(document.getElementById("overallUsePie"));
          let overallUsePieOption = {
            color: ["rgba(176, 212, 251, 1)"],
            title: {
              text: ((this.overallUsePieData[0].value / (this.overallUsePieData[0].value + this.overallUsePieData[
                1].value)) * 100).toFixed(2) + "%\n使用率",
              x: "center",
              y: "center",
              textStyle: {
                fontSize: window.screen.width > 1600 ? 24 : 18,
                color: "#fff",
                fontWeight: "normal",
                align: "center"
              }
            },
            legend: {
              show: true,
              itemGap: 20,
              x: "center",
              bottom: 10,
              textStyle: {
                fontSize: window.screen.width > 1600 ? 16 : 12,
                color: "#fff"
              },
              data: this.overallUsePieData.name,
            },
            series: [{
              name: "Line 1",
              type: "pie",
              startAngle: -120, //起始角度
              radius: ["50%", "66%"],
              labelLine: this.pieStyle.labelLine,
              label: this.pieStyle.label,
              data: [{
                  name: this.overallUsePieData[0].name,
                  value: this.overallUsePieData[0].value,
                  itemStyle: {
                    normal: {
                      color: '#ab85db'
                    }
                  },
                },
                {
                  name: this.overallUsePieData[1].name,
                  value: this.overallUsePieData[1].value,
                  itemStyle: {
                    normal: {
                      color: '#41cffe'
                    }
                  },
                }
              ]
            }]
          };
          overallUsePieChart.setOption(overallUsePieOption, true);
          this.overallUsePieChart = overallUsePieChart;
        },

        // 仓库存储情况一览 warehouseBar
        getWarehouseBar() {
          let warehouseBarChart = echarts.init(document.getElementById("warehouseBar"));
          let self = this;
          let barWidth = window.screen.width > 1600 ? 25 : 20,
            fontSize = window.screen.width > 1600 ? 14 : 12;
          let warehouseBarOption = {
            tooltip: {
              formatter: ((x) => {
                return `${x.name}<br>总容量：${(self.warehouseBar.valueTotal[x.dataIndex]/10000).toFixed(1)}万件<br>已用容量：${(self.warehouseBar.value[x.dataIndex]/10000).toFixed(1)}万件(${this.warehouseBar.valuePercent[x.dataIndex]}%)`
              })
            },
            grid: {
              top: "10%",
              left: "3%",
              right: "3%",
              bottom: "8%",
              containLabel: true
            },
            xAxis: {
              data: self.warehouseBar.name,
              axisTick: false,
              axisLine: self.barStyle.lineColor,
              axisLabel: {
                color: "#fff",
                formatter: x => {
                  return "{tc|" + self.getNewline(x, 5) + "}";
                },
                interval: 0,
                marginLeft: 0,
                rich: {
                  tc: {
                    align: "center"
                  }
                }
              }
            },
            yAxis: {
              nameGap: 8,
              splitLine: false,
              axisTick: false,
              nameTextStyle: {
                color: '#fff'
              },
              axisLabel: false,
              axisLine: false,
            },
            series: [{
                name: '已用容量',
                type: 'bar',
                barWidth: barWidth,
                itemStyle: {
                  normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(106,210,253,1)'
                      },
                      {
                        offset: 1,
                        color: 'rgba(90,99,254, 1)'
                      }
                    ], false),
                    barBorderRadius: [barWidth / 2, barWidth / 2, 0, 0]
                  }
                },
                label: {
                  normal: {
                    show: true,
                    formatter: ((x) => {
                      if (x.value == 0) {
                        return ''
                      } else {
                        return `${(self.warehouseBar.value[x.dataIndex]/10000).toFixed(1)}/${self.warehouseBar.valuePercent[x.dataIndex]}%`;
                      }
                    }),
                    color: '#fff',
                    position: 'top',
                    offset: [-25, 25],
                    rotate: 45,
                    fontSize: 13
                  }
                },
                data: self.warehouseBar.valuePercent
              },
              {
                name: '总容量',
                type: 'bar',
                barWidth: barWidth,
                barGap: '-100%',
                itemStyle: {
                  normal: {
                    barBorderRadius: [barWidth / 2, barWidth / 2, 0, 0],
                    color: "rgba(255,255,255,0.1)",
                    borderWidth: 0
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'top',
                    formatter: function (item) {
                      var val1 = (self.warehouseBar.valueTotal[item.dataIndex] / 10000).toFixed(1)
                      var val2 = '万件';
                      return '{minFont|' + val1 + '} {maxFont|' + val2 + '}';
                    },
                    rich: {
                      minFont: {
                        fontSize: window.screen.width > 1600 ? 13 : 11,
                        color: '#fff'
                      },
                      maxFont: {
                        fontSize: window.screen.width > 1600 ? 14 : 12,
                        color: '#fff'
                      }
                    },
                  }
                },
                data: [100, 100, 100, 100, 100, 100, 100, 100, 100]
              }
            ]
          };
          warehouseBarChart.setOption(warehouseBarOption, true);
          this.warehouseBarChart = warehouseBarChart;
        },

        getAllEcharts() {
          let self = this;
          window.onresize = function () {
            self.stockLineChart && self.stockLineChart.resize();
            self.warehouseBarChart && self.warehouseBarChart.resize();
            self.overallUsePieChart && self.overallUsePieChart.resize();
          };
        },

        //文字换行
        getNewline(val, count) {
          let s = val;
          if (s.length > count) {
            s = s.substring(0, count - 1) + "..";
          }
          return s;
        },
      },
    })
  </script>
</body>

</html>